<template>
    <div>
        <el-row>
            <!-- 条件查询 -->
            <el-form :inline="true" v-model="inHospital" class="demo-form-inline" size="mini">
                 <!-- 病人下拉框 -->
                 <el-form-item label="病人">
                <el-select
                    v-model="name"
                    filterable
                    remote
                    :remote-method="remoteSearch"
                    placeholder="请输入病人姓名"
                    clearable
                    @change="handleSelectionChange"
                >
                    <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                    />
                </el-select>
            </el-form-item>
                 <!-- 时间 -->
                <el-form-item label="开始日期">
                        <el-date-picker v-model="inHospital.beginDate" value-format="yyyy-MM-dd" type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束日期">
                        <el-date-picker v-model="inHospital.endDate" value-format="yyyy-MM-dd" type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="queryHz">查询</el-button>
                    </el-form-item>
            </el-form>

            <el-switch v-model="isPatientOfDoctor"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="是自己病人"
                inactive-text="不是自己病人"
                @change="handleSwitchChange">
            </el-switch>
        </el-row>
        <el-row>
            <el-table
            :data="options"
            border
            style="width: 100%">
                <el-table-column
                prop="name"
                label="患者"
                width="180">
                </el-table-column>
                <el-table-column
                prop="deName"
                label="科室">
                </el-table-column>
                <el-table-column
                prop="docName"
                label="医生">
                </el-table-column>
                <el-table-column
                prop="hzStartDate"
                label="入住日期">
                </el-table-column>
                <el-table-column
                    prop="hzCaseId"
                    label="病例">
                    <template slot-scope="scope">
                        <el-button @click="goToCase(scope.row.hzCaseId)" type="primary" size="mini" icon="el-icon-reading">查看病历</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="hzStatus" label="操作" >
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.hzStatus === '1' ? 'warning' : ''" disable-transitions>
                            {{ scope.row.hzStatus === '1' ? '已办理出院' : '' }}
                            <!-- 使用 v-if 条件判断，在 hzStatus 的值为 '0' 时显示按钮,在 isPatientOfDoctor的值为false的时候disabled这个按钮-->
                            <el-button v-if="scope.row.hzStatus === '0'"
                                    :disabled="!isPatientOfDoctor"
                                    type="text"
                                    size="mini" @click="tools(scope.row)">
                                就诊
                            </el-button>
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 放分页 -->
                <el-pagination background :current-page="pageNum" :page-size="pageSize" @next-click="nextPage"
                    @prev-click="prePage" @current-change="currentPage" @size-change="sizeChange"
                    layout="prev, pager, next,total,sizes" :total="total" :page-sizes="[5, 10, 15, 20]">
                </el-pagination>
            </el-col>
        </el-row>



        <el-dialog title="就诊" :visible.sync="dialogFormVisible" width="80%">
            <el-menu :default-active="activeMenu" class="el-menu-demo" @select="handleMenuSelect" mode="horizontal">
                <el-menu-item index="1">开检查</el-menu-item>
                <el-menu-item index="2">开药申请</el-menu-item>
                <el-menu-item index="3">手术申请</el-menu-item>
                <el-menu-item index="4">出院申请</el-menu-item>
                <el-menu-item index="5">退药申请</el-menu-item>
                <el-menu-item index="6">医嘱</el-menu-item>
                <el-menu-item index="7">病历填写</el-menu-item>
            </el-menu>
            <el-form v-if="activeMenu === '1'">
                <AddCheck @closeDialog="handleCloseDialogWithData" :caseId="inHospitalAdd.hzCaseId"></AddCheck>
            </el-form>
            <el-form v-else-if="activeMenu === '2'">
                <AddDrug @closeDialog="handleCloseDialogWithData" :caseId="inHospitalAdd.hzCaseId"></AddDrug>
            </el-form>
            <el-form v-else-if="activeMenu === '3'">
                <AddSurgeryForm @closeDialog="handleCloseDialogWithData" :caseId="inHospitalAdd.hzCaseId"></AddSurgeryForm>
            </el-form>
            <el-form v-else-if="activeMenu === '4'">
                <AddDischarge @closeDialog="handleCloseDialogWithData" :caseId="inHospitalAdd.hzCaseId"></AddDischarge>
            </el-form>
            <el-form v-else-if="activeMenu === '5'">
                <AddWithdrawal @closeDialog="handleCloseDialogWithData" :caseId="inHospitalAdd.hzCaseId"></AddWithdrawal>
            </el-form>
            <el-form v-else-if="activeMenu === '6'">
                <AddDocAdv closeDialog="handleCloseDialogWithData" :caseId="inHospitalAdd.hzCaseId"></AddDocAdv>
            </el-form>
            <el-form v-else>
                <AddCase @closeDialog="handleCloseDialogWithData" :caseId="inHospitalAdd.hzCaseId"></AddCase>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button  @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import AddCase from '../outpatient/AddCase.vue';
import AddCheck from '../outpatient/AddCheck.vue';
import AddDrug from '../outpatient/AddDrug.vue';
import AddSurgeryForm from './AddSurgeryForm.vue';
import AddDocAdv from './AddDocAdv.vue';
import AddDischarge from './AddDischarge.vue';
import AddWithdrawal from './AddWithdrawal.vue';

export default {
    data(){
        return{
            isPatientOfDoctor: false, // 默认情况下，病人不属于医生
            doctor:{},//医生
            pageParam:{},
            pageNum: 1,
            pageSize: 5,
            total: 0,
            name:'',
            inHospitalAdd:{},//用于实现添加检查药品等功能的对象
            beginDate:'',
            endDate:'',
            inHospital:{},
            options:[],
            statusList: [
                { id: 0, name: '住院' },
                { id: 1, name: '出院' },
            ],
            dialogFormVisible:false,
            form:{},
            formLabelWidth: '120px',
            activeMenu:'1'
        }
    },
    methods:{
        sizeChange(val){
            this.pageNum=1;
            this.pageSize=val;
            this.queryRegistered()
        },
        currentPage(val){
            this.pageNum=val;
            this.queryRegistered()
        },
        prePage(val){
            this.pageNum=val;
            this.queryRegistered()
        },
        nextPage(val){
            this.pageNum=val;
            this.queryRegistered()
        },
        // 远程搜索方法
        remoteSearch(query) {
        // 在这里执行远程搜索，获取匹配的病人列表
        // 分页加条件查询展示
        this.name = query.name;
        this.queryConditionHz()
        },
         // 处理选项变化事件
        handleSelectionChange(value) {
        console.log('选中的值：', value);
        this.name = value.name;
        // 在这里可以根据选中的值执行相应的操作
        },
        goToCase(rsCaseId){
            this.$router.push({path:"/case",query:{caseId:rsCaseId}})
        },
        queryConditionHz(){
            this.pageNum=1;
            this.pageSize=5;
            this.queryHz()
        },
        queryHz(){
            this.pageParam.pageNum=this.pageNum
            this.pageParam.pageSize=this.pageSize
            let param=this.inHospital
            param.name=this.name
            this.pageParam.param=param
            this.$axios.post('api/inhospital/queryHz',this.pageParam)
            .then(res => {
            if (res.data.code === 200) {
                let pageInfo = res.data.data
                this.options= pageInfo.list;
                this.pageNum=pageInfo.pageNum
                this.pageSize=pageInfo.pageSize
                this.total=pageInfo.total
            }
            if(res.data.code === 2007){
                this.$router.push({path:'/rateLimit'})
            }
        })
        },
        handleSwitchChange(newValue) {
        // newValue 是开关的新值，true 表示是医生的病人，false 表示不是医生的病人
        console.log('Switch value changed:', newValue);
        // 在这里执行相应的逻辑，例如发送请求更新数据等
       if(newValue){
        this.inHospital.docId=this.doctor.id
        this.queryConditionHz()
       }else{
        this.inHospital.docId=''
        this.queryConditionHz()
       }
    },
    //查找医生信息
    queryDoctor(){
        this.$axios.get("api/doctor/queryDoctor")
        .then(res=>{
            if(res.data.code==200){
                this.doctor=res.data.data;
            }
        })
        },
        tools(val){
            this.dialogFormVisible=true;
            this.inHospitalAdd=val;
        },
        handleCloseDialogWithData(data) {
            // 处理从子组件传递过来的数据
            console.log('Received data from child:', data);
            // 关闭对话框
            this.dialogFormVisible = false;
        },
        handleMenuSelect(index) {
            this.activeMenu = index;
            // 执行你想要的逻辑，比如根据选中的菜单项进行相应的操作
            // console.log("选中了菜单项:", index);
        },
    },
    created(){
        this.queryConditionHz()
        this.queryDoctor()
    },
    components:{
        AddCase,//写病历
        AddCheck,//开检查
        AddDrug,//开药
        AddSurgeryForm,//手术申请
        AddDocAdv,//医嘱
        AddDischarge,//出院申请
        AddWithdrawal//退药申请
    }
}
</script>

<style>

</style>